<template>
  <div class="my-order" v-loading="orderloading">
    <h4 class="order-head">我的订单</h4>
    <el-row class="operate-item">
      <el-col :span="6">
        <el-select
          v-model="chooseordertype"
          class="m-2"
          placeholder="订单类型"
          size="normal"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in ordertype"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row class="table-row" v-if="!orderloading">
      <el-col :span="24">
        <el-table
          :data="myorderlist"
          style="width: 100%; height: 500px; color: #000"
          :row-style="{ height: '72px' }"
          :header-cell-style="{ background: '#ebf8f8' }"
          :row-class-name="tableRowClassName"
          v-if="myorderlist.length != 0"
        >
          <el-table-column
            label="订单信息"
            fixed
            class-name="usernumber-column"
            width="300px"
          >
            <template #default="scope">
              <span class="ordernumber"
                >订单号: <a href="#">{{ scope.row.orderid }}</a></span
              >
              <div class="info-item">
                <div class="info-img">
                  <img :src="scope.row.url" alt="" />
                </div>
                <div class="info-name">
                  <span class="span-name">{{ scope.row.goodname }}</span>
                  <span class="span-price"
                    >{{ scope.row.price }} x
                    {{ scope.row.goodlist[0].goodnum }}</span
                  >
                  <span v-if="scope.row.goodlist.length != 1" class="span-price"
                    >共计{{ scope.row.goodlist.length }}件商品</span
                  >
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="goodname" label="商品名称" width="150">
          </el-table-column>
          <el-table-column prop="total" label="总金额"> </el-table-column>
          <el-table-column label="地址" align="center" width="150">
            <template #default="scope">
              <span class="address-span" v-if="scope.row.address != ''">{{
                scope.row.address
              }}</span>
              <span class="address-span" v-else>—</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="staus"
            label="状态"
            :filters="[
              { text: '已支付', value: '已支付' },
              { text: '已发货', value: '已收货' },
              { text: '已收货', value: '已收货' },
              { text: '退款中', value: '退款中' },
              { text: '已退款', value: '已退款' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            align="center"
            width="100"
          >
            <template #default="scope">
              <el-tag :type="classObje(scope.row.staus)" disable-transitions>{{
                scope.row?.staus
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="paytime"
            label="支付时间"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="120"
          >
            <template #default="scope">
              <el-row class="operate-btn">
                <el-col :span="24"
                  ><el-button
                    type="danger"
                    class="info-btn"
                    size="small"
                    @click="opendialog(scope.row)"
                    >订单详情</el-button
                  ></el-col
                >
                <el-col :span="24"
                  ><el-button
                    type="danger"
                    size="small"
                    @click="backmoney(scope.row)"
                    >申请退款</el-button
                  ></el-col
                >
                <el-col :span="24">
                  <el-button
                    type="primary"
                    size="small"
                    @click="checkget(scope.row)"
                    >确认收货</el-button
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-empty
          :image-size="200"
          
          description="暂无订单,快去下单吧~"
          v-else
        />
      </el-col>
    </el-row>
    <el-dialog
      v-model="dialogVisible"
      title="订单详情"
      width="60%"
      v-if="!dialogloading"
    >
      <el-table
        :data="chooseorder.goodlist"
        style="
          width: 100%;
          height: 300px;
          border: 1px solid #ebf8f8;
          text-align: center;
        "
        :row-style="{ height: '72px' }"
        :header-cell-style="{ background: '#ebf8f8' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column label="商品图片" width="150" align="center">
          <template #default="scope">
            <span class="img-col" @click="goodpush(scope.row)">
              <img :src="scope.row.url" alt="" />
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center">
        </el-table-column>
        <el-table-column prop="goodnum" label="商品数量" align="center">
        </el-table-column>
        <el-table-column
          prop="price"
          label="商品价格"
          width="150"
          align="center"
        >
        </el-table-column>
      </el-table>
      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  getorder,
  request,
  getuserinfo,
  getlevellist,
  changeorder,
} from "network/request.js";
import { ElMessage } from "element-plus";
export default {
  inject: ["reload"],
  data() {
    return {
      myorderlist: [],
      ordertype: [
        {
          value: "不限",
          label: "不限",
        },
        {
          value: "汽车购买",
          label: "汽车购买",
        },
        {
          value: "会员购买",
          label: "会员购买",
        },
      ],
      chooseordertype: "",
      token: "",
      usernumber: "",
      chooseorder: {
        orderid: "",
        goodlist: [],
        paytime: "",
        userid: "",
        address: "",
        total: "",
        staus: "",
        type: "",
        usernumber: "",
        id: "",
      },
      orderloading: false,
      dialogVisible: false,
      dialogloading: false,
    };
  },
  computed: {
    classObje: function () {
      return (staus) => {
        if (staus == "已发货") {
          return "primary";
        } else if (staus == "已支付") {
          return "success";
        } else if (staus == "已退款") {
          return "info";
        } else if (staus == "退款中") {
          return "danger";
        }
        return "primary";
      };
    },
  },
  watch: {
    chooseordertype: {
      handler() {
        this.myorderlist = [];
        getorder(this.usernumber, this.chooseordertype).then(
          ({ data: res }) => {
            res.forEach((item) => {
              // console.log(item.goodlist[0]);
              //判断是否为汽车商品
              if (/^(s)(?=.*\d).+$/.test(item.goodlist[0].goodid)) {
                request(item.goodlist[0].goodid).then(({ data: response }) => {
                  item.goodname = response[0].carmessage.deal;
                  item.url = response[0].dealswapperlist[0].url;
                  item.price = response[0].carmessage.price;
                  this.myorderlist.push(item);
                });
              } else {
                //商品为vip会员
                getlevellist(item.goodlist[0].goodid).then(
                  ({ data: levelres }) => {
                    // console.log(levelres[0].leveltitle);
                    item.goodname = levelres[0].leveltitle;
                    item.url = "http://192.168.2.27:8888/assets/img/vip.png";
                    item.price = levelres[0].VipAllPrice;
                    this.myorderlist.push(item);
                  }
                );
              }
            });
          }
        );
      },
      deep: true,
    },
  },

  async created() {
    //获取当前用户的订单信息
    this.orderloading = true;
    this.token = localStorage.getItem("token");
    this.usernumber = "";
    await getuserinfo(this.token).then(({ data: res }) => {
      this.usernumber = res[0].usernumber;
    });
    await getorder(this.usernumber).then(({ data: res }) => {
      res.forEach((item) => {
        //判断是否为汽车商品
        if (/^(s)(?=.*\d).+$/.test(item.goodlist[0].goodid)) {
          request(item.goodlist[0].goodid).then(({ data: response }) => {
            item.goodname = response[0].carmessage.deal;
            item.url = response[0].dealswapperlist[0].url;
            item.price = response[0].carmessage.price;
            this.myorderlist.push(item);
          });
        } else {
          // console.log(123);
          //商品为vip会员
          getlevellist(item.goodlist[0].goodid).then(({ data: levelres }) => {
            // console.log(levelres[0].leveltitle);
            item.goodname = levelres[0].leveltitle;
            item.url = "http://192.168.2.27:8888/assets/img/vip.png";
            item.price = levelres[0].VipAllPrice;
            this.myorderlist.push(item);
          });
        }
      });
      this.orderloading = false;
    });
  },
  methods: {
    filterTag(value, row) {
      return row.level === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    backmoney(row) {
      this.chooseorder = JSON.parse(JSON.stringify(row));
      if (this.chooseorder.type == "会员购买") {
        return ElMessage.warning("很抱歉,暂不支持会员退款功能~");
      }
      if (this.chooseorder.staus == "退款中") {
        return ElMessage.warning("管理员正在处理您的退款申请,请稍后~");
      }
      changeorder(this.chooseorder.id, "退款中").then(() => {
        ElMessage.success("已发起申请退款,等待管理员进行处理~");
        this.reload();
      });
    },
    checkget(row) {
      this.chooseorder = JSON.parse(JSON.stringify(row));
      if (this.chooseorder.staus != "已发货") {
        return ElMessage.warning("很抱歉,当前商品暂未发货或处于退款中~");
      }
      changeorder(this.chooseorder.id, "已收货").then(() => {
        ElMessage.success("确认收货成功~");
        this.reload();
      });
    },
    getorderinfo() {
      // this.dialogloading = true
      this.chooseorder.goodlist.forEach((item) => {
        // console.log(item);
        if (/^(s)(?=.*\d).+$/.test(item.goodid)) {
          request(item.goodid).then(({ data: res }) => {
            item.price = res[0].carmessage.price;
            item.url = res[0].dealswapperlist[0].url;
            item.name = res[0].carmessage.deal;
          });
        } else {
          getlevellist(item.goodid).then(({ data: levelres }) => {
            // console.log(levelres[0].leveltitle);
            item.name = levelres[0].leveltitle;
            item.url = "http://192.168.2.27:8888/assets/img/vip.png";
            item.price = levelres[0].VipAllPrice;
          });
        }
      });
    },
    opendialog(row) {
      this.chooseorder = JSON.parse(JSON.stringify(row));
      // console.log(this.chooseorder)
      this.getorderinfo();
      this.dialogVisible = true;
    },
    goodpush(row) {
      if (/^(s)(?=.*\d).+$/.test(row.goodid)) {
        this.$router.push({
          path: "/cardeal",
          query: {
            id: row.goodid,
          },
        });
      } else {
        this.$router.push({
          path: "/myinfo/levelup",
        });
      }
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
a {
  color: blue;
}
.my-order {
  width: 100%;
  height: calc(100vh - 10px);
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  padding-top: 10px;
}
.operate-item {
  width: 90%;
  margin: 0 auto;
}

.order-head {
  margin: 0 auto;
  width: 90%;
  height: 50px;
  line-height: 50px;
  // background-color: red;
  font-family: "黑体";
  letter-spacing: 1px;
  font-size: 18px;
  padding-left: 10px;
  font-weight: 600;
}

.table-row {
  width: 90%;
  margin: 10px auto;
}
.ordernumber {
  text-align: left;
  display: block;
  font-size: 12px;
  color: #000;
  width: 100%;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info-item {
  padding: 5px;
  display: flex;
  width: 100%;
  margin: 0 auto;
  .info-img {
    width: 80px;
    height: 50px;
    img {
      width: 100%;
      vertical-align: middle;
      height: 100%;
    }
  }
  .info-name {
    span {
      display: block;
      color: #000;
      width: 100%;
      font-size: 16px;
      text-align: left;
    }
    .span-name {
      font-weight: 600;
    }
    .span-price {
      color: #777;
      font-size: 13px;
    }
  }
}
.el-select-dropdown__item {
  color: var(--el-color-black);
  padding-left: 10px;
}
.el-select-dropdown__item.hover {
  color: lightskyblue;
}
.operate-btn {
  padding: 0 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-weight: bolder;
  .el-button {
    border: none;
    margin-bottom: 5px;
  }
  .info-btn {
    background: linear-gradient(45deg, orange, rgba(255, 102, 0, 0.89));
  }
}
.address-span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-align: center;
  color: #000;
  // width: 100px;
  // background-color: red;
}
.img-col {
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
  img:hover {
    cursor: pointer;
  }
}
</style>